<template>
  <div class="merchantDetails">
    <!-- 商户详情 -->
    <el-form
      ref="form"
      :model="form"
      label-width="150px"
      class="detailForm"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(255, 255, 255, 0.8)"
    >
      <!-- 左侧表单 -->
      <el-col :span="10" :offset="3">
        <!-- 软件版本 -->
        <el-form-item label="软件版本">
          <el-select v-model="form.sv_versionname" placeholder="请选择软件版本" size="small" disabled></el-select>
        </el-form-item>
        <!-- 行业类型 -->
        <el-form-item label="行业类型">
          <el-select
            v-model="form.sv_uit_name"
            placeholder="请选择行业类型"
            size="small"
            @change="handleIndustryName"
          >
            <el-option
              v-for="(item, index) in business"
              :key="index"
              :label="item.sv_uit_name"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 商户姓名 -->
        <el-form-item label="商户姓名">
          <el-input v-model="form.sv_ul_name" size="small"></el-input>
        </el-form-item>
        <!-- 商户手机号/账号 -->
        <el-form-item label="商户账号">
          <el-input v-model="form.sv_ul_mobile" size="small"></el-input>
        </el-form-item>
        <!-- 设置密码 -->
        <el-form-item label="登录密码">
          <el-input placeholder="请输入密码" v-model="form.sv_ul_loginpwd" show-password size="small"></el-input>
        </el-form-item>
        <!-- 店铺简称 -->
        <el-form-item label="店铺简称">
          <el-input v-model="form.sv_us_shortname" size="small"></el-input>
        </el-form-item>
        <!-- 店铺名称 -->
        <el-form-item label="店铺名称">
          <el-input v-model="form.sv_us_name" size="small"></el-input>
        </el-form-item>
        <!-- 是否总店 -->
        <el-form-item label="是否总店">
          <el-select v-model="isStore" placeholder="总&分店" size="small" disabled></el-select>
        </el-form-item>
        <!-- 店铺状态 -->
        <el-form-item label="店铺状态" class="shopStatus">
          <el-select
            v-model="form.sv_ul_status"
            placeholder="店铺状态"
            size="small"
            disabled
            class="msgRecycle"
          ></el-select>
          <el-button
            type="primary"
            size="small"
            @click="handleDelete(form)"
            style="border: none;height: 30px;"
            :style="btnStatus == '禁用' ? 'background-color: #909399' : 'background-color: #409eff'"
          >{{btnStatus}}</el-button>
        </el-form-item>
        <!-- 短信余量 -->
        <el-form-item label="短信余量">
          <el-row type="flex" justify="space-between">
            <el-col :span="8">
              <el-input v-model="errmsg" size="small" disabled class="msgRecycle"></el-input>
            </el-col>
            <el-col :span="8" :offset="1">
              <el-button type="primary" size="small" @click="handleRecall(form)">短信回收</el-button>
            </el-col>
          </el-row>
        </el-form-item>
        <!-- 增值服务 -->
        <el-form-item label="增值服务">
          <div class="facility">
            <div
              class="item"
              v-for="(item, index) in servicesData"
              :key="index"
              @click="handleTodredge(form,item)"
              :style="{display: item.sv_user_config_code.indexOf('ValueAddedServices_Recommend_TOFoodinOneSet') >= 0 ? 'none': ' block'}"
            >
              <el-tooltip placement="top">
                <div slot="content" style="text-align: center;color: #fff">
                  {{item.itemName}}
                  <br />
                  <span
                    :style="item.itemPrice=='未开通' ? 'color: #0094ff' : 'color: red'"
                  >{{item.itemPrice}}</span>
                </div>
                <span
                  :style="item.itemPrice=='未开通' ? 'background-color: #ddd' : 'background-color: #0094ff'"
                  class="icon"
                >{{item.sv_config_abbreviation}}</span>
              </el-tooltip>
            </div>
          </div>
        </el-form-item>
      </el-col>
      <!-- 右侧表单 -->
      <el-col :span="10">
        <!-- 注册时间 -->
        <el-form-item label="注册时间">
          <el-input v-model="form.sv_ul_regdate" size="small" disabled></el-input>
        </el-form-item>
        <!-- 到期时间 -->
        <el-form-item label="到期时间">
          <el-input v-model="sv_versionexpiration" size="small" disabled></el-input>
        </el-form-item>
        <!-- 最后登录时间 -->
        <el-form-item label="最后登录时间">
          <el-input v-model="sv_ul_lastlogintime" size="small" disabled></el-input>
        </el-form-item>
        <!-- 店铺电话 -->
        <el-form-item label="店铺电话">
          <el-input v-model="form.sv_us_phone" size="small"></el-input>
        </el-form-item>
        <!-- 推荐人 -->
        <el-form-item label="推荐人">
          <el-input :disabled="referenceSwitch" v-model="form.sv_us_reference" size="small"></el-input>
        </el-form-item>
        <!-- 经理/客服 -->
        <el-form-item label="经理/客服">
          <el-select
            size="medium"
            v-model="form.sv_openshop_person"
            placeholder="请选择经理/客服"
            :disabled="usertype == 1 ? true : false"
          >
            <el-option
              v-for="(item, index) in userData"
              :key="index"
              :label="item.name"
              :value="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 店铺地址 -->
        <el-form-item label="店铺地址">
          <el-cascader
            expand-trigger="hover"
            :options="options"
            v-model="selectedOptions"
            placeholder="请选择地址"
            size="small"
          ></el-cascader>
          <el-input
            v-model="form.sv_us_address"
            placeholder="请输入店铺地址"
            class="detailAdress"
            size="small"
          ></el-input>
        </el-form-item>
        <!-- 是否开通支付 -->
        <el-form-item label="是否开通支付" size="small">
          <el-select
            size="medium"
            v-model="form.dec_payment_method"
            placeholder="请选择支付配置"
            :disabled="payEnable ? false : true"
            @change="handleDisbursement"
          >
            <el-option
              v-for="(item, index) in disbursement"
              :key="index"
              :label="item.name"
              :value="item.id"
              :disabled="item.disabled"
              :style="{display: item.disabled?'none':''}"
            ></el-option>
          </el-select>
          <el-input
            size="medium"
            style="margin-top: 10px;margin-bottom: 10px"
            :style="{display: payEnable?'':'none'}"
            v-model="mercId"
            :placeholder="form.dec_payment_method == 12 ? '请输入商户号':'请输入收款Key'"
          ></el-input>
          <el-input
            v-if="form.dec_payment_method == 12"
            size="medium"
            :style="{display: payEnable?'':'none'}"
            v-model="signKey"
            placeholder="请输入终端号"
          ></el-input>
          <el-input
            v-else
            :style="{display: payEnable?'':'none'}"
            size="medium"
            v-model="signKey"
            placeholder="请输入加密Key"
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="20">
        <el-form-item style="text-align: center">
          <el-button type="primary" @click="onSubmit" style="padding: 5px 20px">保存</el-button>
        </el-form-item>
      </el-col>
    </el-form>
    <!-- 弹出框 -->
    <div class="recallDetail" v-show="visible">
      <div class="content" style="width: 500px">
        <h3 class="title" style="font-size: 16px;margin-bottom: 20px">短信撤回</h3>
        <div class="close" @click="visible = false">
          <i class="fa fa-times" aria-hidden="true"></i>
        </div>
        <el-col :offset="4">
          <el-form label-width="80px" :model="formLabelAlign">
            <el-form-item style="width: 60%" size="small" label="店铺ID">
              <el-input v-model="formLabelAlign.user_id" disabled></el-input>
            </el-form-item>
            <el-form-item style="width: 60%" size="small" label="店铺账号">
              <el-input v-model="formLabelAlign.sv_ul_mobile" disabled></el-input>
            </el-form-item>
            <el-form-item style="width: 60%" size="small" label="店铺名称">
              <el-input v-model="formLabelAlign.sv_us_name" disabled></el-input>
            </el-form-item>
            <el-form-item style="width: 60%" size="small" label="短信条数">
              <el-input-number v-model="errmsgNum" :min="1" :max="errmsg"></el-input-number>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="small" @click="onRecyc">回收</el-button>
              <el-button size="small" @click="visible = false">取消</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </div>
    </div>
  </div>
</template>
<script>
import { regionData } from "element-china-area-data";
import { mapState } from "vuex"; //注册state
export default {
  data() {
    return {
      // 表单数据
      form: {
        sv_versionname: "", // 软件版本
        sv_us_industrytype: "", // 行业类型
        sv_ul_name: "", // 商户姓名
        sv_ul_mobile: "", // 商户账号
        sv_ul_loginpwd: "", // 登录密码
        sv_us_shortname: "", // 店铺简称
        sv_us_name: "", // 店铺名称
        isStore: this.isStore, // 是否总店
        sv_ul_status: "", // 店铺状态
        sv_us_phone: "", // 店铺电话
        sv_us_reference: "", // 推荐人
        sv_openshop_person: "", // 经理/客服
        sv_us_province: "", // 省
        sv_us_city: "", // 市
        sv_us_district: "", // 县
        sv_us_address: "", // 店铺地址
        dec_payment_method: "", // 支付方式
        dec_payment_config: {}, // 支付配置
        log_operatedata: "" // 操作日志
      },
      dec_payment_config: {}, // 支付配置
      loading: true,
      // 监听修改的数据
      changeData: [
        { key: "sv_us_industrytype", name: "行业类型", before: "", after: "" },
        { key: "sv_ul_name", name: "商户姓名", before: "", after: "" },
        { key: "sv_ul_mobile", name: "商户账号", before: "", after: "" },
        { key: "sv_ul_loginpwd", name: "登录密码", before: "", after: "" },
        { key: "sv_us_shortname", name: "店铺简称", before: "", after: "" },
        { key: "sv_us_name", name: "店铺名称", before: "", after: "" },
        { key: "sv_us_phone", name: "店铺电话", before: "", after: "" },
        { key: "sv_us_reference", name: "推荐人", before: "", after: "" },
        { key: "sv_openshop_person", name: "经理/客服", before: "", after: "" },
        { key: "sv_us_province", name: "省", before: "", after: "" },
        { key: "sv_us_city", name: "市", before: "", after: "" },
        { key: "sv_us_district", name: "县", before: "", after: "" },
        { key: "sv_us_address", name: "店铺地址", before: "", after: "" },
        { key: "dec_payment_method", name: "支付方式", before: "", after: "" },
        { key: "dec_payment_config", name: "支付配置", before: "", after: "" }
      ],
      // 德客支付渠道,0:默认，1官方，2服务商，3讯联，4信用宝，5新大陆，6酷享灵风，7酷享灵风V3，8代理服务商，9小精灵，10HaiPay，11CCBPay，12QPay
      disbursement: [
        { id: 0, name: "默认", disabled: false },
        { id: 1, name: "官方默认", disabled: false },
        { id: 2, name: "服务商", disabled: true },
        { id: 3, name: "讯联", disabled: true },
        { id: 4, name: "信用宝", disabled: true },
        { id: 5, name: "新大陆", disabled: true },
        { id: 6, name: "酷享灵风", disabled: true },
        { id: 7, name: "酷享灵风V3", disabled: true },
        { id: 8, name: "代理服务商", disabled: false },
        { id: 9, name: "小精灵", disabled: true },
        { id: 10, name: "HaiPay", disabled: true }, // 四川翼支付
        { id: 11, name: "CCBPay", disabled: true }, // 建行龙支付
        { id: 12, name: "QPay", disabled: true } // 拉卡拉QPay
      ],
      isShow: true, // 根据id隐藏支付配置
      channels: [], // 支付通道
      mercId: "", // 付款key
      signKey: "", // 加密key
      sv_versionexpiration: "", // 到期时间
      sv_ul_lastlogintime: "", // 最后登录时间
      referenceSwitch: false,
      // 短信余量
      errmsg: 0,
      isStore: "",
      // 增值服务数据
      servicesData: [],
      // 地址级联数据
      options: regionData,
      selectedOptions: [],
      // 这个是弹出框里的数据
      formLabelAlign: {},
      // 短信回收条数
      errmsgNum: "",
      visible: false,
      // 行业类型
      business: [],
      // 这个是客服/经理
      userData: [],
      // 店铺状态按钮
      btnStatus: "",
      // 身份令牌
      myToken: ""
    };
  },
  computed: {
    // 引入权限页面
    ...mapState(["userId"]),
    ...mapState(["usertype"]),
    ...mapState(["payEnable"])
  },
  methods: {
    // 初始化函数
    init() {
      // 获取令牌
      this.myToken = sessionStorage.getItem("myToken");
      if (!this.payEnable) {
        // 隐藏权限不足页面
        this.isShow = false;
      }
      this.disbursement.forEach(val => {
        if (this.userId == 114) {
          if (val.id == 6 || val.id == 7) {
            val.disabled = false;
          }
        } else if (this.userId == 252) {
          if (val.id == 10) {
            val.disabled = false;
          }
        } else if (this.userId == 126 || this.userId == 121) {
          if (val.id == 12) {
            val.disabled = false;
          }
        } else {
          if (val.id == 8) {
            val.disabled = false;
          }
        }
      });

      // 格式化时间
      this.timeFormatting = this.utils.timeFormatting();
      // 获取商户ID
      const { user_id } = this.$route.query;
      // 获取增值服务详情
      this.$api
        .getValueAddedServices(user_id, 2, "", this.myToken)
        .then(res => {
          const { childInfolist } = res.configList[0];
          this.servicesData = childInfolist.map(v => {
            if (
              v.childDetailList == null ||
              v.childDetailList[0] == undefined
            ) {
              var itemPrice;
              if (
                res.sv_buyoperatornumber != 0 &&
                v.sv_user_config_code ==
                  "ValueAddedServices_Recommend_BuyOperater"
              ) {
                // 操作员
                itemPrice = "已有操作员" + res.sv_buyoperatornumber + "位";
              } else {
                itemPrice = "未开通";
              }
              return {
                ...v,
                itemName: v.sv_user_config_name,
                itemPrice
              };
            } else {
              if (v.sv_user_config_code.indexOf("_Permanent") > 0) {
                v.childDetailList[0].sv_expire_date = "永久有效";
              } else {
                v.childDetailList[0].sv_expire_date = new Date(
                  v.childDetailList[0].sv_expire_date
                ).Format("yyyy-MM-dd hh:mm:ss");
              }
              return {
                ...v,
                itemName:
                  "已开通" + v.childDetailList[0].sv_user_configdetail_name,
                itemPrice: v.childDetailList[0].sv_expire_date
              };
            }
          });
        });
      // 处理总分店
      this.isStore = this.$route.query.isStore;
      this.formLabelAlign.user_id = user_id;
      // 获取详细信息
      this.getDetailData();
      // 行业数据
      this.$api.getIndustryData(this.myToken).then(res => {
        this.business = res.map(v => {
          return {
            ...v
          };
        });
      });
      // 获取客服/经理
      this.$api.getManagerData(this.myToken).then(res => {
        const { dataList, total } = res;
        this.total = total;
        if (dataList) {
          this.userData = dataList.map(v => {
            return {
              name: v.sv_d_user_name
            };
          });
        }
      });
    },
    handleIndustryName(val) {
      this.form.sv_us_industrytype = val.industrytype_id;
      this.form.sv_uit_name = val.sv_uit_name;
    },
    // 获取详细信息
    getDetailData() {
      // 获取商户ID
      const { user_id } = this.$route.query;
      this.$api.getMerchantDetails(user_id, this.myToken).then(res => {
        const { values, errmsg } = res;
        this.loading = false;
        // 对推荐人的修改设置权限
        if (this.usertype != 0) {
          if (values.sv_us_reference && values.sv_us_reference != "手机官网") {
            this.referenceSwitch = true;
          }
        }
        this.errmsg = errmsg; // 短信余量
        // 是否总分店
        // 是否禁用
        if (values.sv_ul_status == 0) {
          values.sv_ul_status = "正常";
          this.btnStatus = "禁用";
        } else {
          values.sv_ul_status = "禁用";
          this.btnStatus = "启用";
        }
        // 是否开通支付,总后台配置
        // if (values.need_config_payment) {
        if (values.dec_payment_config) {
          this.dec_payment_config = JSON.parse(values.dec_payment_config);
          if (values.dec_payment_method == 12) {
            this.signKey = this.dec_payment_config.trmNo;
          } else {
            this.signKey = this.dec_payment_config.signKey;
          }
          this.mercId = this.dec_payment_config.mercId;
        }
        // }
        // 格式化三级地址
        this.selectedOptions.push(
          (values.sv_us_province + "0000").substring(0, 6),
          (values.sv_us_city + "00").substring(0, 6),
          (values.sv_us_district + "").substring(0, 6)
        );
        // 格式化注册时间
        values.sv_ul_regdate = new Date(values.sv_ul_regdate).Format(
          "yyyy-MM-dd hh:mm:ss"
        );
        // 格式化到期时间
        values.sv_versionexpiration = new Date(
          values.sv_versionexpiration
        ).Format("yyyy-MM-dd hh:mm:ss");
        // 格式化最后登录时间
        values.sv_ul_lastlogintime = new Date(
          values.sv_ul_lastlogintime
        ).Format("yyyy-MM-dd hh:mm:ss");
        // 赋予弹窗需要的数据
        this.formLabelAlign.sv_ul_mobile = values.sv_ul_mobile;
        this.formLabelAlign.sv_us_name = values.sv_us_name;
        this.form.errmsg = errmsg;
        // 处理时间问题
        this.sv_ul_regdate = values.sv_ul_regdate;
        this.sv_versionexpiration = values.sv_versionexpiration;
        this.sv_ul_lastlogintime = values.sv_ul_lastlogintime;
        // 没有记录的时间显示为空
        if (this.sv_versionexpiration.substring(0, 1) == "1") {
          this.sv_versionexpiration = "永久";
        }
        if (this.sv_ul_lastlogintime.substring(0, 1) == "1") {
          this.sv_ul_lastlogintime = "尚未登录";
        }
        // 记录商户详情原始数据
        this.changeData[0].before = values.sv_uit_name;
        this.changeData[1].before = values.sv_ul_name;
        this.changeData[2].before = values.sv_ul_mobile;
        this.changeData[3].before = values.sv_ul_loginpwd;
        this.changeData[4].before = values.sv_us_shortname;
        this.changeData[5].before = values.sv_us_name;
        this.changeData[6].before = values.sv_us_phone;
        this.changeData[7].before = values.sv_us_reference;
        this.changeData[8].before = values.sv_openshop_person;
        this.changeData[9].before = values.sv_us_province;
        this.changeData[10].before = values.sv_us_city;
        this.changeData[11].before = values.sv_us_district;
        this.changeData[12].before = values.sv_us_address;
        this.changeData[13].before = values.dec_payment_method;
        this.changeData[14].before = values.dec_payment_config;
        this.form = values;
      });
    },
    // 禁用
    handleDelete(i) {
      this.$confirm(`是否${this.btnStatus}状态?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          // 还原状态
          this.form.sv_ul_status == "正常"
            ? (this.form.sv_ul_status = 0)
            : (this.form.sv_ul_status = -1);
          const { user_id } = this.$route.query;
          if (this.form.sv_ul_status == 0) {
            this.$api.disableTheStore(user_id, this.myToken).then(res => {
              if (res) {
                this.btnStatus = "启用";
                this.form.sv_ul_status = "禁用";
                this.$message({
                  message: "禁用成功",
                  type: "success"
                });
              } else {
                this.$message.error("操作失败");
                this.btnStatus = "禁用";
                this.form.sv_ul_status = "正常";
              }
            });
          } else {
            this.$api
              .enableTheStore(user_id, this.myToken, this.form.sv_ul_mobile)
              .then(res => {
                if (res) {
                  this.btnStatus = "禁用";
                  this.form.sv_ul_status = "正常";
                  this.$message({
                    message: "启用成功",
                    type: "success"
                  });
                } else {
                  this.$message.error("操作失败");
                  this.btnStatus = "启用";
                  this.form.sv_ul_status = "禁用";
                }
              });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    // 获取支付配置id
    handleDisbursement(val) {
      this.form.dec_payment_method = val;
    },
    // 保存修改信息
    onSubmit() {
      // 判断数据是否被修改，将修改的数据存入一个空数组发到服务端
      let changeArr = [];
      this.changeData[0].after = this.form.sv_uit_name;
      this.changeData[1].after = this.form.sv_ul_name;
      this.changeData[2].after = this.form.sv_ul_mobile;
      this.changeData[3].after = this.form.sv_ul_loginpwd;
      this.changeData[4].after = this.form.sv_us_shortname;
      this.changeData[5].after = this.form.sv_us_name;
      this.changeData[6].after = this.form.sv_us_phone;
      this.changeData[7].after = this.form.sv_us_reference;
      this.changeData[8].after = this.form.sv_openshop_person;
      this.changeData[9].after = this.form.sv_us_province;
      this.changeData[10].after = this.form.sv_us_city;
      this.changeData[11].after = this.form.sv_us_district;
      this.changeData[12].after = this.form.sv_us_address;
      this.changeData[13].after = this.form.dec_payment_method;
      this.changeData[14].after = this.form.dec_payment_config;
      this.changeData.forEach((e, i) => {
        if (e.before != e.after) {
          changeArr.push(e);
        }
      });

      this.form.log_operatedata = JSON.stringify(changeArr);
      // 正则验证表单
      // 验证特殊字符
      const patrn = /[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、]/im;
      // 验证数字字母和特殊字符
      const pwdPatrn = /^[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、0-9A-Za-z]{6,}$/;
      // 店铺简称
      if (this.form.sv_us_shortname === null) {
        this.$message.error("请输入店铺简称");
        return;
      } else if (this.form.sv_us_shortname.length > 8) {
        this.$message.error("店铺简称长度不得超过8字符");
        return;
      } else if (patrn.test(this.form.sv_us_shortname)) {
        this.$message.error("店铺简称请勿输入特殊字符");
        return;
      }
      // 店铺名称
      if (this.form.sv_us_name === null) {
        this.$message.error("请输入店铺名称");
        return;
      } else if (this.form.sv_us_name.length > 30) {
        this.$message.error("店铺名称长度不得超过30字符");
        return;
      } else if (patrn.test(this.form.sv_us_shortname)) {
        this.$message.error("店铺名称请勿输入特殊字符");
        return;
      }
      // 商户姓名
      if (this.form.sv_ul_name === null) {
        this.$message.error("请输入商户姓名");
        return;
      } else if (this.form.sv_ul_name.length > 20) {
        this.$message.error("商户姓名长度不得超过20个字符");
        return;
      }
      // 商户手机号
      if (!/^[0,1,6,8][013456789]\d{8,9}$/.test(this.form.sv_ul_mobile)) {
        this.$message.error("请输入正确的手机号");
        return;
      }
      // 密码
      if (!pwdPatrn.test(this.form.sv_ul_loginpwd)) {
        this.$message.error("密码格式错误");
        return;
      }
      // 店铺电话
      if (this.form.sv_us_phone !== "" && this.form.sv_us_phone !== null) {
        if (!pwdPatrn.test(this.form.sv_us_phone)) {
          this.$message.error("请输入正确的店铺电话");
          return;
        }
      }
      // 还原省市区
      this.form.sv_us_province = parseInt(
        this.selectedOptions[0].substring(0, 2)
      );
      this.form.sv_us_city = parseInt(this.selectedOptions[1].substring(0, 4));
      this.form.sv_us_district = parseInt(
        this.selectedOptions[2].substring(0, 6)
      );
      // 还原店铺状态
      this.form.sv_ul_status == "正常"
        ? (this.form.sv_ul_status = 0)
        : (this.form.sv_ul_status = -1);
      // 支付配置
      if (this.form.dec_payment_method == 12) {
        this.dec_payment_config.trmNo = this.signKey;
        this.dec_payment_config.ShopNo = this.signKey;
      } else {
        this.dec_payment_config.signKey = this.signKey;
      }
      this.dec_payment_config.mercId = this.mercId;
      this.form.dec_payment_config = JSON.stringify(this.dec_payment_config);
      // return;
      // 提交数据
      this.$api.SaveTheChanges(this.form, this.myToken).then(res => {
        const { succeed, errmsg } = res;
        if (succeed) {
          this.$message({
            message: "修改成功",
            type: "success"
          });
          this.$router.push({
            path: "myMerchant",
            query: {
              x: 1
            }
          });
        } else {
          this.$message.error(errmsg);
        }
      });
    },
    // 回收操作
    handleRecall(val) {
      this.visible = true;
      this.errmsgNum = 1;
    },
    // 回收短信的操作
    onRecyc() {
      // 短信回收
      this.$api
        .SmsHandle(
          this.formLabelAlign.user_id,
          this.errmsgNum,
          "",
          "",
          1,
          this.myToken
        )
        .then(res => {
          if (res) {
            this.$message({
              type: "success",
              message: "回收成功"
            });
            this.getDetailData();
          } else {
            this.$message.error("操作失败");
          }
          this.visible = false;
        });
    },
    // 开通增至服务
    handleTodredge(v, item) {
      // 判断是否开通该功能;
      if (item.itemPrice === "未开通") {
        var detail = 1;
        this.$router.push({
          path: "addedServices",
          query: {
            sv_us_name: v.sv_us_name,
            user_id: v.user_id,
            detail
          }
        });
      }
    }
  },
  mounted() {
    // 初始化函数
    this.init();
  }
};
</script>

<style lang="less" scoped>
@deep: ~">>>";
.merchantDetails @{deep} .detailForm {
  background-color: #fff;
  padding-top: 20px;
  overflow: hidden;
}
.detailForm @{deep} .el-input {
  width: 300px;
}
.detailForm @{deep} .el-row {
  width: 350px;
}
.detailForm @{deep} .msgRecycle {
  width: 200px;
}
.detailForm @{deep} .el-input__inner {
  width: 300px;
}
.msgRecycle @{deep} .el-input__inner {
  width: 200px;
}
.msgRecycle @{deep} .el-input {
  width: 200px;
}
.detailForm {
  .facility {
    display: flex;
    align-items: center;
    > .item {
      margin: 5px;
      margin-top: 0;
      cursor: pointer;
      .icon {
        font-size: 12px;
        font-weight: 100;
        padding: 4px 8px;
        border-radius: 4px;
        color: #fff;
      }
      .iconFacility {
        font-size: 26px;
      }
    }
  }
  .shopStatus @{deep} .el-form-item__content {
    display: flex;
    align-items: center;
    width: auto;
    .msgRecycle {
      margin-right: 40px;
    }
  }
}
.merchantDetails {
  // 这个是弹出框的样式
  .recallDetail {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    .content {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #fff;
      padding: 10px;
      box-sizing: border-box;
      border-radius: 10px;
    }
    .close {
      position: absolute;
      top: 10px;
      right: 10px;
      cursor: pointer;
      color: #666;
      font-size: 20px;
    }
  }
}
#el-popover-331,
#el-popover-7783 {
  padding: 0 40px;
  top: 50%;
}
</style>